NAVIGATION
  • 전체 글
CATEGORIES
  • Develop7
    • Backend3
    • Frontend2
    • Git1
    • Performance1
  • AI3
    • Claude Code3
  • Frontend1
    • Next.js1
POPULAR TAGS
  • API3
  • 클로드코드2
  • 성능최적화2
  • GraphQL2
  • REST2
  • React2
  • JavaScript2
  • 프론트엔드2
  • Claude Code1
  • AI1
···
>steady-one_

© 2025 steady-one Blog. All rights reserved.

Claude Code 실전 꿀팁
Claude Code
2025년 10월 16일

Claude Code 실전 꿀팁

3개월 동안 매일 쓰면서 발견한 진짜 유용한 팁들만 모았습니다!

.클로드코드

💡 Claude Code 실전 꿀팁 10가지 (현직 개발자가 알려주는)

3개월 동안 매일 쓰면서 발견한 진짜 유용한 팁들만 모았습니다! ⚡

들어가며 👋

안녕하세요!

Claude Code를 3개월째 실무에서 사용하고 있는 개발자입니다.

처음엔 "이거 진짜 쓸만한가?" 싶었는데,

지금은 없으면 안 될 정도로 의존하고 있어요. 😅

오늘은 제가 발견한 진짜 유용한 꿀팁 10가지를 공유합니다!

구글링해도 안 나오는,

직접 써보면서 깨달은 노하우들입니다. 🔥


목차

  1. 마법의 주문 "컨텍스트 먼저"

  2. 파일 경로는 절대경로로

  3. 에러 메시지 = 복붙 필승법

  4. 코드 블록으로 예시 제공

  5. 체크리스트로 검증 자동화

  6. 한 번에 하나씩, 그리고 확인

  7. "이전 대화 기억해"라고 말하기

  8. diff 모드로 변경사항 확인

  9. 프롬프트 템플릿 만들기

  10. 최종 무기: 연쇄 프롬프트


Tip 1: 마법의 주문 "컨텍스트 먼저" 🎯

문제 상황


나: "UserService에 getUser 메소드 추가해줘"

  

Claude: "UserService 파일을 찾을 수 없습니다."

😭 "왜 안 돼...?"

해결책: 컨텍스트 먼저 제공!

Before:


"UserService에 메소드 추가해줘"

After:


"1. 먼저 프로젝트 구조를 파악해줘

2. src/services/UserService.js 파일을 읽어줘

3. 그다음 getUser(userId) 메소드를 추가해줘"

실전 템플릿


"다음 순서로 진행해줘:

  

1. 📂 프로젝트 구조 파악

2. 📖 [파일명] 읽기

3. ✏️ [작업 내용]"

왜 효과적인가?

Claude는 프로젝트 전체를 기억하지 못합니다.

매번 새로운 대화처럼 시작하기 때문에,

명시적으로 컨텍스트를 제공해야 합니다!

💎 보너스 팁

프로젝트 시작 시 이렇게 말하면 더 좋아요:


"이 프로젝트는:

- Next.js 14 (App Router)

- TypeScript

- Tailwind CSS

- Prisma ORM

로 구성되어 있어.

  

앞으로 이 정보를 기억하고 작업해줘."


Tip 2: 파일 경로는 절대경로로 📁

문제 상황


나: "components/Button.js 수정해줘"

  

Claude: "어느 components 폴더인가요?

src/components? app/components?

lib/components?"

🤦 "아오... 헷갈려!"

해결책: 항상 절대경로 사용!

Before (상대경로):


❌ "components/Button.js"

❌ "../utils/helper.js"

❌ "./config.js"

After (절대경로):


✅ "src/components/Button.js"

✅ "src/utils/helper.js"

✅ "src/config.js"

VS Code에서 쉽게 복사하는 법

  1. 파일 우클릭

  2. "Copy Path" 클릭

  3. 그대로 붙여넣기!

프로젝트 루트 명시하기

더 확실하게 하려면:


"프로젝트 루트는 /Users/yourname/project 이고,

/Users/yourname/project/src/components/Button.js

파일을 수정해줘"


Tip 3: 에러 메시지 = 복붙 필승법 🐛

문제 상황


나: "에러 났어"

  

Claude: "어떤 에러인가요?"

  

나: "음... 뭔가 모듈을 찾을 수 없대"

  

Claude: "구체적인 에러 메시지를 보여주시겠어요?"

😤 "아 귀찮아..."

해결책: 에러 메시지 통째로 복붙!

Bad (요약):


❌ "모듈 에러 났어"

❌ "빌드가 안 돼"

❌ "실행이 안 돼"

Good (전체 복사):


✅ "npm run dev 실행 중 이런 에러 발생:

  

Error: Cannot find module 'express'

Require stack:

- /Users/yourname/project/server.js

- /Users/yourname/project/index.js

at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)

at Function.Module._load (internal/modules/cjs/loader.js:667:27)

  

어떻게 해결하면 돼?"

꿀팁: 스크린샷도 같이!

터미널 스크린샷을 찍어서 함께 보내면 더 정확한 답변을 받을 수 있어요!

에러 로그 복사 단축키

  • Mac: Cmd + A → Cmd + C

  • Windows: Ctrl + A → Ctrl + C


Tip 4: 코드 블록으로 예시 제공 📝

문제 상황


나: "날짜 포맷팅 함수 만들어줘"

  

Claude: "어떤 형식으로 포맷팅하시나요?"

  

나: "음... 2024년 1월 15일 이런 식으로?"

  

Claude: "숫자도 포함하시나요? 요일은요?"

😫 "설명하기 귀찮아..."

해결책: 코드 블록으로 예시!

Before (말로 설명):


"날짜를 한글로 바꿔줘"

After (코드로 예시):


"날짜 포맷팅 유틸 함수를 만들어줘.

  

예시:

```javascript

formatDate(new Date('2024-01-15'))

// 결과: '2024년 1월 15일'

  

formatDate(new Date('2024-01-15'), 'short')

// 결과: '24.01.15'

  

formatDate(new Date('2024-01-15'), 'long')

// 결과: '2024년 1월 15일 월요일'

```

  

이런 식으로 동작해야 해."

왜 효과적?

  • 👀 시각적으로 명확

  • 🎯 정확한 요구사항 전달

  • ⏱️ 설명 시간 단축

  • ✅ 원하는 결과 보장

응용: API 응답 예시도!


"users API를 만들어줘.

  

응답 형식:

```json

{

"success": true,

"data": {

"users": [

{

"id": 1,

"name": "홍길동",

"email": "hong@example.com"

}

],

"total": 100,

"page": 1

}

}

```

  

이 형식으로 응답해야 해."


Tip 5: 체크리스트로 검증 자동화 ✅

문제 상황

코드를 만들어는 줬는데...


- 타입스크립트 에러 발생

- ESLint 경고 뜸

- 테스트 안 짜줌

- 주석 없음

😭 "이것저것 다시 요청하기 귀찮아..."

해결책: 체크리스트 미리 제공!

Before:


"Login 컴포넌트 만들어줘"

After:


"Login 컴포넌트를 만들어줘.

  

다음 조건을 모두 만족해야 해:

- [ ] TypeScript 타입 정의

- [ ] PropTypes 또는 인터페이스

- [ ] ESLint 규칙 준수

- [ ] 접근성(a11y) 고려

- [ ] 에러 처리

- [ ] JSDoc 주석

- [ ] 사용 예시 주석

  

완료 후 체크리스트를 확인해줘."

실전 체크리스트 템플릿

컴포넌트용


- [ ] Props 타입 정의

- [ ] 기본값(defaultProps) 설정

- [ ] 에러 바운더리

- [ ] 로딩 상태 처리

- [ ] 반응형 디자인

- [ ] 접근성(ARIA)

- [ ] JSDoc 주석

- [ ] Storybook 스토리

- [ ] 단위 테스트

API용


- [ ] 에러 처리 (try-catch)

- [ ] 타입 정의

- [ ] 요청/응답 로깅

- [ ] 타임아웃 설정

- [ ] 재시도 로직

- [ ] 인터셉터 (토큰 추가)

- [ ] JSDoc 주석

- [ ] 통합 테스트

💎 프로 팁

완성 후 이렇게 검증 요청:


"방금 만든 코드가 체크리스트를 만족하는지

하나씩 확인하고 보고서를 작성해줘."


Tip 6: 한 번에 하나씩, 그리고 확인 🎯

문제 상황

욕심 부림:


나: "React 프로젝트 만들고,

라우팅 설정하고,

Redux 설정하고,

로그인/회원가입 페이지 만들고,

API 연동하고,

배포까지 해줘"

  

Claude: (열심히 하다가 중간에 멈춤)

😱 "어디까지 한 거야?!"

해결책: 작은 단위 + 확인

Bad (한 번에 다):


❌ "프로젝트 세팅 전부 해줘"

Good (단계별):


✅ Step 1: "Create React App 프로젝트 생성"

→ [확인] ✅

  

✅ Step 2: "React Router 설치 및 설정"

→ [확인] ✅

  

✅ Step 3: "기본 페이지 3개 생성 (Home, About, Contact)"

→ [확인] ✅

  

✅ Step 4: "네비게이션 바 추가"

→ [확인] ✅

왜 중요한가?

  1. 문제 발생 시 정확한 위치 파악

  2. 중간에 수정 가능

  3. 진행 상황 추적 용이

  4. 멘탈 안 깨짐 😅

프로젝트 큰 작업 나누는 법

예: "블로그 만들기"


Phase 1: 기본 세팅

├─ 프로젝트 생성

├─ 폴더 구조

└─ 기본 설정

  

Phase 2: UI 컴포넌트

├─ Header

├─ Footer

└─ PostCard

  

Phase 3: 기능 개발

├─ 포스트 목록

├─ 포스트 상세

└─ 검색

  

Phase 4: 최적화

├─ SEO

├─ 성능 개선

└─ 테스트

각 단계를 하나씩 진행하세요!


Tip 7: "이전 대화 기억해"라고 말하기 🧠

문제 상황


나: "Button 컴포넌트 만들어줘"

Claude: (만들어줌) ✅

  

나: "거기에 loading prop 추가해줘"

Claude: "어느 Button 컴포넌트인가요?"

😤 "방금 만든 거잖아!"

해결책: 명시적으로 참조!

Before:


❌ "거기에 추가해줘"

❌ "그거 수정해줘"

After:


✅ "방금 만든 src/components/Button.js에

loading prop을 추가해줘"

  

✅ "이전 대화에서 작성한 Button 컴포넌트를

다시 읽고, loading 상태를 추가해줘"

마법의 주문


"이전 대화를 기억해.

[파일명]에 [변경사항]을 추가해줘."

연속 작업 템플릿


"다음 작업들을 순차적으로 해줘.

각 단계는 이전 단계의 결과를 기반으로 해:

  

1. Button 컴포넌트 생성

2. (1번 결과에) variant prop 추가

3. (2번 결과에) loading 상태 추가

4. (3번 결과에) 접근성 개선"


Tip 8: diff 모드로 변경사항 확인 🔍

문제 상황


Claude: "파일을 수정했습니다!"

  

나: "뭐가 바뀐 거야...?"

😵 "전체 코드를 다시 읽어야 하나..."

해결책: 변경사항만 보여달라고 요청!

Before:


"수정해줘"

After:


"수정해줘.

그리고 변경된 부분을 diff 형식으로 보여줘."

결과 예시


변경사항:

  

```diff

// src/components/Button.js

  

export function Button({ text, onClick }) {

+ const [loading, setLoading] = useState(false);

+

+ const handleClick = async () => {

+ setLoading(true);

+ await onClick();

+ setLoading(false);

+ };

  

return (

- <button onClick={onClick}>

+ <button onClick={handleClick} disabled={loading}>

+ {loading ? 'Loading...' : text}

</button>

);

}

```

왜 유용한가?

  • ✅ 변경사항 한눈에 파악

  • ✅ 리뷰하기 쉬움

  • ✅ 의도하지 않은 변경 발견

  • ✅ Git diff와 비슷해서 익숙

추가 요청


"변경사항을 요약해서 설명해줘:

- 무엇이 바뀌었나?

- 왜 바뀌었나?

- 영향받는 다른 코드는?"


Tip 9: 프롬프트 템플릿 만들기 📋

문제 상황

매번 비슷한 요청을 하는데...


"React 컴포넌트 만들어줘,

타입스크립트로,

Props 정의하고,

스타일은 Tailwind로,

주석도 달고..."

😫 "매번 이렇게 길게 쓰기 귀찮아!"

해결책: 템플릿 만들어서 재사용!

템플릿 1: React 컴포넌트


[컴포넌트명] 컴포넌트를 만들어줘.

  

파일 경로: src/components/[컴포넌트명].tsx

  

요구사항:

- TypeScript 사용

- Props 인터페이스 정의

- Tailwind CSS로 스타일링

- 반응형 디자인

- 접근성(a11y) 고려

- JSDoc 주석

- 사용 예시 주석

  

Props:

- [prop1]: [타입] - [설명]

- [prop2]: [타입] - [설명]

  

기능:

- [기능1]

- [기능2]

템플릿 2: API 엔드포인트


[엔드포인트명] API를 만들어줘.

  

파일 경로: src/api/[파일명].ts

  

사양:

- Method: [GET/POST/PUT/DELETE]

- Path: /api/[경로]

- Request: [요청 형식]

- Response: [응답 형식]

  

요구사항:

- TypeScript 타입 정의

- 에러 처리 (try-catch)

- 유효성 검증

- 로깅

- JSDoc 주석

- 단위 테스트

템플릿 3: 유틸 함수


[함수명] 유틸 함수를 만들어줘.

  

파일 경로: src/utils/[파일명].ts

  

시그니처:

```typescript

function [함수명]([파라미터]): [리턴타입]

요구사항:

  • TypeScript

  • JSDoc 주석

  • 에러 처리

  • 엣지 케이스 고려

  • 단위 테스트

  • 사용 예시

예시:

 
// 여기에 예시 코드
 

  

### 템플릿 저장 장소

  

**방법 1: 텍스트 파일**

~/claude-templates/

├── react-component.txt

├── api-endpoint.txt

└── util-function.txt


  

**방법 2: Notion/Obsidian**

- 검색하기 쉬움

- 태그 달기 가능

- 버전 관리 용이

  

**방법 3: Alfred/Raycast (Mac)**

- 단축키로 바로 붙여넣기

- 변수 치환 가능

  

---

  

## Tip 10: 최종 무기 - 연쇄 프롬프트 🚀

  

### 문제 상황

  

복잡한 기능을 만들 때,

단계가 너무 많아서 헷갈림.

  

### 해결책: 연쇄 프롬프트 기법!

  

**연쇄 프롬프트란?**

하나의 큰 작업을 **여러 단계로 나누고**,

각 단계의 **결과를 다음 단계의 입력**으로 사용하는 기법.

  

### 실전 예시: 로그인 시스템 만들기

  

#### 프롬프트 1: 계획 수립

  

"React + Express로 JWT 로그인 시스템을 만들 거야.

먼저 전체 계획을 세워줘:

  1. 필요한 파일 목록

  2. 각 파일의 역할

  3. 작업 순서

  4. 예상 소요 시간

계획만 만들고 코드는 아직 작성하지 마."


  

#### 프롬프트 2: 백엔드 먼저

  

"위에서 만든 계획을 기반으로,

백엔드부터 만들어줘.

순서:

  1. Express 서버 setup

  2. JWT 미들웨어

  3. 로그인 API

  4. 회원가입 API

하나씩 완료 후 확인하면서 진행."


  

#### 프롬프트 3: 프론트엔드

  

"백엔드가 완료되었으니,

이제 React 프론트엔드를 만들어줘.

백엔드 API 스펙:

  • POST /api/auth/login

  • POST /api/auth/register

이 스펙에 맞춰서:

  1. API 클라이언트

  2. 로그인 페이지

  3. 회원가입 페이지

  4. 인증 상태 관리

순차적으로 진행."


  

#### 프롬프트 4: 통합 및 테스트

  

"백엔드와 프론트엔드를 통합하고,

전체 흐름을 테스트해줘.

확인 사항:

  • 회원가입 → 로그인 → 인증

  • 에러 처리

  • 토큰 만료 처리

문제 발생 시 즉시 알려줘."


  

#### 프롬프트 5: 최적화 및 마무리

  

"작동하는 것을 확인했으니,

이제 최적화와 마무리를 해줘:

  1. 코드 리뷰 및 리팩토링

  2. 보안 체크

  3. 성능 최적화

  4. README 작성

  5. 배포 가이드"


  

### 왜 강력한가?

  

1. **체계적인 진행**

- 단계별로 명확

- 진행 상황 추적 용이

  

2. **에러 최소화**

- 각 단계에서 검증

- 문제 조기 발견

  

3. **품질 향상**

- 각 단계에 집중

- 세밀한 조정 가능

  

4. **학습 효과**

- 과정을 이해하게 됨

- 응용 가능

  

### 연쇄 프롬프트 템플릿

  

Step 1: Planning (계획)

"[프로젝트]를 만들 계획을 세워줘"

Step 2: Setup (세팅)

"위 계획에 따라 기본 세팅을 해줘"

Step 3: Core Features (핵심 기능)

"핵심 기능 [A, B, C]를 구현해줘"

Step 4: Additional Features (부가 기능)

"부가 기능 [X, Y, Z]를 추가해줘"

Step 5: Testing (테스트)

"전체 기능을 테스트해줘"

Step 6: Optimization (최적화)

"성능 최적화 및 리팩토링"

Step 7: Documentation (문서화)

"README와 주석을 작성해줘"


  

---

  

## 보너스 팁 🎁

  

### Bonus 1: 실수 인정하기

  

Claude도 실수합니다!

뭔가 이상하다 싶으면:

  

"이거 맞아? 다시 한번 확인해줘"


  

### Bonus 2: 여러 옵션 요청

  

"로그인 UI 디자인 3가지 옵션을 제시해줘.

각 옵션의 장단점도 함께."


  

### Bonus 3: 설명 요청

  

"방금 작성한 코드를 단계별로 설명해줘.

초보자도 이해할 수 있게."


  

### Bonus 4: 베스트 프랙티스

  

"이 코드가 베스트 프랙티스를 따르는지 체크하고,

개선 사항을 제안해줘."


  

### Bonus 5: 학습 모드

  

"이 기능을 구현하면서

주요 개념들을 설명해줘.

나는 배우면서 코딩하고 싶어."


  

---

  

## 정리: 핵심만 요약 📚

  

### 10가지 꿀팁 체크리스트

  

- [ ] **Tip 1**: 컨텍스트 먼저 제공

- [ ] **Tip 2**: 파일 경로는 절대경로

- [ ] **Tip 3**: 에러 메시지 복붙

- [ ] **Tip 4**: 코드로 예시 제공

- [ ] **Tip 5**: 체크리스트로 검증

- [ ] **Tip 6**: 한 번에 하나씩

- [ ] **Tip 7**: 이전 대화 명시적 참조

- [ ] **Tip 8**: diff로 변경사항 확인

- [ ] **Tip 9**: 프롬프트 템플릿 활용

- [ ] **Tip 10**: 연쇄 프롬프트 기법

  

### 실전 적용 단계

  

**Level 1 (초보):**

Tip 1, 2, 3 마스터

→ 기본적인 사용

  

**Level 2 (중급):**

Tip 4, 5, 6 추가

→ 효율적인 사용

  

**Level 3 (고급):**

Tip 7, 8, 9 활용

→ 전문가처럼 사용

  

**Level 4 (마스터):**

Tip 10 + 보너스 팁

→ 최고 수준

  

### 황금 공식

  

좋은 프롬프트 =

명확한 컨텍스트 +

구체적인 요구사항 +

확인 가능한 예시 +

검증 기준


  

---

  

## 마치며 🎉

  

이 꿀팁들은 제가 **3개월 동안 직접 써보면서**

**삽질하고, 실패하고, 개선하면서** 발견한 것들입니다.

  

처음엔 이것저것 시도하다가,

점점 효율적인 패턴을 발견하게 되더라고요.

  

**여러분도 직접 써보시면서**

자신만의 팁을 발견하실 거예요! 💪

  

### 시작하는 분들께

  

- 처음엔 느려도 괜찮아요

- 실수하면서 배우세요

- 템플릿부터 시작하세요

- 꾸준히 쓰다 보면 늘어요!

  

### 이미 쓰고 계신 분들께

  

- 여러분만의 팁도 공유해주세요!

- 더 좋은 방법 있으면 알려주세요!

- 함께 성장해요! 🚀

  

---

  

## 다음 단계 🎯

  

### 추천 학습 순서

  

1. **이 글의 팁들 하나씩 실습**

2. **자주 쓰는 프롬프트 템플릿 만들기**

3. **실제 프로젝트에 적용해보기**

4. **자신만의 팁 발견하고 정리하기**

  

### 더 알아보기

  

- [Claude Code 공식 문서](https://docs.anthropic.com/claude-code)

- [프롬프트 엔지니어링 가이드](https://www.promptingguide.ai/)

- [Claude Code 커뮤니티](https://community.anthropic.com)

  

---

  

질문이나 피드백, 여러분만의 꿀팁이 있다면

댓글로 공유해주세요! 💬

  

함께 더 나은 개발자가 되어요! 🌟

  

---

  

**작성일**: 2025-10-16

**태그**: #ClaudeCode #개발팁 #실전가이드 #생산성 #AI코딩

목차

  • 💡 Claude Code 실전 꿀팁 10가지 (현직 개발자가 알려주는)
  • 들어가며 👋
  • 목차
  • Tip 1: 마법의 주문 "컨텍스트 먼저" 🎯
  • Tip 2: 파일 경로는 절대경로로 📁
  • Tip 3: 에러 메시지 = 복붙 필승법 🐛
  • Tip 4: 코드 블록으로 예시 제공 📝
  • Tip 5: 체크리스트로 검증 자동화 ✅
  • Tip 6: 한 번에 하나씩, 그리고 확인 🎯
  • Tip 7: "이전 대화 기억해"라고 말하기 🧠
  • Tip 8: diff 모드로 변경사항 확인 🔍
  • Tip 9: 프롬프트 템플릿 만들기 📋
  • Tip 10: 최종 무기 - 연쇄 프롬프트 🚀
  • 보너스 팁 🎁
  • 정리: 핵심만 요약 📚
  • 마치며 🎉
  • 다음 단계 🎯